<wicket:extend>
    <div wicket:id="content" class="build-spec build-spec-view d-flex flex-column flex-grow-1"></div>
    <wicket:fragment wicket:id="parseableFrag">
		<div wicket:id="feedback"></div>
    	<div class="head">
        	<a wicket:id="jobs" class="jobs">Jobs</a>
        	<a wicket:id="services" class="services">Services</a>
        	<a wicket:id="stepTemplates" class="step-templates">Step Templates</a>
        	<a wicket:id="properties" class="properties">Properties</a>
        	<a wicket:id="imports" class="imports">Imports</a>
        </div>
        <div class="body d-flex flex-column flex-grow-1">
			<div wicket:id="content" class="content"></div>
		</div>
    </wicket:fragment>
    <wicket:fragment wicket:id="unparseableFrag">
        <div class="title">Error parsing build spec</div>
        <div wicket:id="errorMessage" class="error-message"></div>
    </wicket:fragment>
    <wicket:fragment wicket:id="jobsFrag">
        <div wicket:id="pipeline" class="side autofit pr-2"></div>
        <div wicket:id="detail" class="main d-flex flex-column flex-grow-1 ml-4 p-2"></div>
    </wicket:fragment>
    <wicket:fragment wicket:id="elementsFrag">
        <div class="side autofit flex-shrink-0 pr-2">
        	<div class="navs"><div wicket:id="navs" class="nav btn-group btn-block mb-3">
            	<a wicket:id="select" class="select btn btn-outline-secondary text-nowrap justify-content-start"><span wicket:id="label"></span></a>
	        </div></div>
		</div>
        <div wicket:id="detail" class="main d-flex flex-column flex-grow-1 ml-4 p-2"></div>
    </wicket:fragment>
	<wicket:fragment wicket:id="elementImportNoticeFrag">
		<div class="alert alert-light-info">
			This <span wicket:id="elementTypeName"></span> is imported from <a wicket:id="link" class="alert-link"><span wicket:id="label"></span></a>
		</div>
	</wicket:fragment>
	<wicket:fragment wicket:id="propertiesFrag">
	    <table class="table">
	        <thead>
	            <th>Name</th>
	            <th>Value</th>
	        </thead>
	        <tbody>
	            <tr wicket:id="properties">
	                <td>
	                    <div><span wicket:id="name"></span> <a wicket:id="imported"><wicket:svg href="arrow2" class="icon imported"></wicket:svg></a></div>
	                </td>
	                <td>
	                    <div wicket:id="value"></div>
	                </td>
	            </tr>
	        </tbody>
	    </table>
	</wicket:fragment>
	<wicket:fragment wicket:id="jobFrag">
    	<a wicket:id="select" class="select btn btn-outline-secondary justify-content-start text-nowrap"><span wicket:id="label"></span></a>
    	<a wicket:id="run" class="run btn btn-outline-secondary btn-icon flex-grow-0 flex-shrink-0" title="Run this job"><wicket:svg href="play" class="icon"></wicket:svg></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="elementDetailFrag">
	    <div class="body flex-grow-1 autofit p-3">
			<div wicket:id="notice"></div>
			<div wicket:id="content"></div>
		</div>
	</wicket:fragment>
</wicket:extend>